<template>
  <div class="top-bar">
    <section class="top-bar-left">
      <breadcrumb></breadcrumb>
    </section>
    <section class="top-bar-center"></section>
    <section class="top-bar-right">
      <el-input v-if="store.role === 'student'" class="stage-display" v-model="stuStageInfo" disabled></el-input>
      <el-select v-else v-model="store.currentStage" class="stage-display" @change="onChange">
        <el-option v-for="item in store.stageList" :key="item.stage" :label="item.stage + '期' + item.department + '部'" :value="item.stage" />
      </el-select>
      <!-- <el-avatar :size="46" :src="avatarSrc" class="top-bar-right-item" /> -->
      <article class="top-bar-right-item" @click="onOpenInfoDialog">{{ loginData.info.name }}</article>
      <more-buttons></more-buttons>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { APIData, IStageList, ITchStageParams, TokenToInfo } from '../../type';
import { useUserStore } from '../../store/user';
import { defineAsyncComponent } from 'vue';
import { useAPI } from '../../request/api';
import Breadcrumb from '../breadcrumb/Index.vue';
import { ElMessage } from 'element-plus';

onMounted(() => {
  // getTchAllStage();
});

const MoreButtons = defineAsyncComponent(() => import('./MoreButtons.vue'));
const store = useUserStore();
const api = useAPI();

const stuStageInfo = ref<string>(`${store.currentStage}期${store.currentDepartment}部`);

const loginData = reactive<TokenToInfo>({
  info: store.userInfo,
});

store.$subscribe((args: any, states) => {
  loginData.info = states.userInfo;
  stuStageInfo.value = `${states.currentStage}期${states.currentDepartment}部`;
});

const onChange = (value: number) => {
  for (const item of store.stageList) {
    if (item.stage === value) {
      store.$patch(states => {
        states.currentDepartment = item.department;
      });
      ElMessage.success(`数据已切换到 ${item.stage}期${item.department}部`);
    }
  }
};

const avatarSrc = ref<string>('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

const emit = defineEmits(['openInfoDialog']);
const onOpenInfoDialog = () => {
  emit('openInfoDialog');
};
</script>

<style lang="scss" scoped>
.top-bar {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  // border: 2px solid red;
  .stage-display {
    margin-right: 8px;
  }

  .el-input {
    width: 110px;
  }
  :deep(.el-input.is-disabled),
  :deep(.el-input.is-disabled .el-input__inner) {
    cursor: pointer;
  }

  :deep(.el-input__wrapper) {
    width: 110px;
    box-shadow: 0 0 0 0;
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-width: 0 0 1px 0 !important;
  }
  :deep(.el-input.is-focus .el-input__wrapper),
  :deep(.el-input__wrapper.is-focus),
  :deep(.el-input__wrapper):hover {
    box-shadow: 0 0 0 0 !important;
  }

  &-left {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    // border: 2px solid green;
  }
  &-center {
    flex: 1;
    // border: 2px solid red;
  }
  &-right {
    width: 30%;
    height: 100%;
    // border: 2px solid green;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    // article {
    //   width: 80px;
    // }

    &-item {
      margin: 0 8px;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.5s ease;
    }
    &-item:hover {
      transform: translateY(-6px);
      // transition: all 0.3s ease;
    }
  }
}
</style>
